<!DOCTYPE html>

<!--
This is a minified version of the ThemeForest-theme "Melon - Flat & Responsive Admin Template".

Author: Simon 'Stammi' Stamm <http://themeforest.net/user/Stammi?ref=stammi>

Note: If you buy my template on ThemeForest, you will receive the non-minified and commented/ documentated version!
This is a minified version to prevent stealing.

You can buy Melon here: http://themeforest.net/item/melon-flat-responsive-admin-template/5495486?ref=stammi
-->

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<title>Dynamic Tables (DataTables) | Melon - Flat &amp; Responsive Admin Template</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="plugins/jquery-ui/jquery.ui.1.10.2.ie.css"/><![endif]-->
<link href="assets/css/main.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/icons.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="assets/css/fontawesome/font-awesome.min.css">
<!--[if IE 7]><link rel="stylesheet" href="assets/css/fontawesome/font-awesome-ie7.min.css"><![endif]--><!--[if IE 8]><link href="assets/css/ie8.css" rel="stylesheet" type="text/css"/><![endif]-->
<!--<link href='http://fonts.useso.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>-->
<script type="text/javascript" src="assets/js/libs/jquery-1.10.2.min.js"></script><script type="text/javascript" src="plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js"></script><script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script><script type="text/javascript" src="assets/js/libs/lodash.compat.min.js"></script><!--[if lt IE 9]><script src="assets/js/libs/html5shiv.js"></script><![endif]--><script type="text/javascript" src="plugins/touchpunch/jquery.ui.touch-punch.min.js"></script><script type="text/javascript" src="plugins/event.swipe/jquery.event.move.js"></script><script type="text/javascript" src="plugins/event.swipe/jquery.event.swipe.js"></script><script type="text/javascript" src="assets/js/libs/breakpoints.js"></script><script type="text/javascript" src="plugins/respond/respond.min.js"></script><script type="text/javascript" src="plugins/cookie/jquery.cookie.min.js"></script><script type="text/javascript" src="plugins/slimscroll/jquery.slimscroll.min.js"></script><script type="text/javascript" src="plugins/slimscroll/jquery.slimscroll.horizontal.min.js"></script><script type="text/javascript" src="plugins/sparkline/jquery.sparkline.min.js"></script><script type="text/javascript" src="plugins/daterangepicker/moment.min.js"></script><script type="text/javascript" src="plugins/daterangepicker/daterangepicker.js"></script><script type="text/javascript" src="plugins/blockui/jquery.blockUI.min.js"></script><script type="text/javascript" src="plugins/uniform/jquery.uniform.min.js"></script><script type="text/javascript" src="plugins/select2/select2.min.js"></script><script type="text/javascript" src="plugins/datatables/jquery.dataTables.min.js"></script><script type="text/javascript" src="plugins/datatables/tabletools/TableTools.min.js"></script><script type="text/javascript" src="plugins/datatables/colvis/ColVis.min.js"></script><script type="text/javascript" src="plugins/datatables/columnfilter/jquery.dataTables.columnFilter.js"></script><script type="text/javascript" src="plugins/datatables/DT_bootstrap.js"></script><script type="text/javascript" src="assets/js/app.js"></script><script type="text/javascript" src="assets/js/plugins.js"></script><script type="text/javascript" src="assets/js/plugins.form-components.js"></script><script>$(document).ready(function(){App.init();Plugins.init();FormComponents.init()});</script><script type="text/javascript" src="assets/js/custom.js"></script>
</head>
<body>
<header class="header navbar navbar-fixed-top" role="banner">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-toggle"><a href="javascript:void(0);" title=""><i class="icon-reorder"></i></a></li>
    </ul>
    <a class="navbar-brand" href="index.html"> <img src="assets/img/logo.png" alt="logo"/> <strong>ME</strong>LON </a> <a href="#" class="toggle-sidebar bs-tooltip" data-placement="bottom" data-original-title="Toggle navigation"> <i class="icon-reorder"></i> </a>
    <ul class="nav navbar-nav navbar-left hidden-xs hidden-sm">
      <li> <a href="#"> Dashboard </a> </li>
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown <i class="icon-caret-down small"></i> </a>
        <ul class="dropdown-menu">
          <li><a href="#"><i class="icon-user"></i> Example #1</a></li>
          <li><a href="#"><i class="icon-calendar"></i> Example #2</a></li>
          <li class="divider"></li>
          <li><a href="#"><i class="icon-tasks"></i> Example #3</a></li>
        </ul>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-warning-sign"></i> <span class="badge">5</span> </a>
        <ul class="dropdown-menu extended notification">
          <li class="title">
            <p>You have 5 new notifications</p>
          </li>
          <li> <a href="javascript:void(0);"> <span class="label label-success"><i class="icon-plus"></i></span> <span class="message">New user registration.</span> <span class="time">1 mins</span> </a> </li>
          <li> <a href="javascript:void(0);"> <span class="label label-danger"><i class="icon-warning-sign"></i></span> <span class="message">High CPU load on cluster #2.</span> <span class="time">5 mins</span> </a> </li>
          <li> <a href="javascript:void(0);"> <span class="label label-success"><i class="icon-plus"></i></span> <span class="message">New user registration.</span> <span class="time">10 mins</span> </a> </li>
          <li> <a href="javascript:void(0);"> <span class="label label-info"><i class="icon-bullhorn"></i></span> <span class="message">New items are in queue.</span> <span class="time">25 mins</span> </a> </li>
          <li> <a href="javascript:void(0);"> <span class="label label-warning"><i class="icon-bolt"></i></span> <span class="message">Disk space to 85% full.</span> <span class="time">55 mins</span> </a> </li>
          <li class="footer"> <a href="javascript:void(0);">View all notifications</a> </li>
        </ul>
      </li>
      <li class="dropdown hidden-xs hidden-sm"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-tasks"></i> <span class="badge">7</span> </a>
        <ul class="dropdown-menu extended notification">
          <li class="title">
            <p>You have 7 pending tasks</p>
          </li>
          <li> <a href="javascript:void(0);"> <span class="task"> <span class="desc">Preparing new release</span> <span class="percent">30%</span> </span>
            <div class="progress progress-small">
              <div style="width: 30%;" class="progress-bar progress-bar-info"></div>
            </div>
            </a> </li>
          <li> <a href="javascript:void(0);"> <span class="task"> <span class="desc">Change management</span> <span class="percent">80%</span> </span>
            <div class="progress progress-small progress-striped active">
              <div style="width: 80%;" class="progress-bar progress-bar-danger"></div>
            </div>
            </a> </li>
          <li> <a href="javascript:void(0);"> <span class="task"> <span class="desc">Mobile development</span> <span class="percent">60%</span> </span>
            <div class="progress progress-small">
              <div style="width: 60%;" class="progress-bar progress-bar-success"></div>
            </div>
            </a> </li>
          <li> <a href="javascript:void(0);"> <span class="task"> <span class="desc">Database migration</span> <span class="percent">20%</span> </span>
            <div class="progress progress-small">
              <div style="width: 20%;" class="progress-bar progress-bar-warning"></div>
            </div>
            </a> </li>
          <li class="footer"> <a href="javascript:void(0);">View all tasks</a> </li>
        </ul>
      </li>
      <li class="dropdown hidden-xs hidden-sm"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-envelope"></i> <span class="badge">1</span> </a>
        <ul class="dropdown-menu extended notification">
          <li class="title">
            <p>You have 3 new messages</p>
          </li>
          <li> <a href="javascript:void(0);"> <span class="photo"><img src="assets/img/demo/avatar-1.jpg" alt=""/></span> <span class="subject"> <span class="from">Bob Carter</span> <span class="time">Just Now</span> </span> <span class="text"> Consetetur sadipscing elitr... </span> </a> </li>
          <li> <a href="javascript:void(0);"> <span class="photo"><img src="assets/img/demo/avatar-2.jpg" alt=""/></span> <span class="subject"> <span class="from">Jane Doe</span> <span class="time">45 mins</span> </span> <span class="text"> Sed diam nonumy... </span> </a> </li>
          <li> <a href="javascript:void(0);"> <span class="photo"><img src="assets/img/demo/avatar-3.jpg" alt=""/></span> <span class="subject"> <span class="from">Patrick Nilson</span> <span class="time">6 hours</span> </span> <span class="text"> No sea takimata sanctus... </span> </a> </li>
          <li class="footer"> <a href="javascript:void(0);">View all messages</a> </li>
        </ul>
      </li>
      <li> <a href="#" class="dropdown-toggle row-bg-toggle"> <i class="icon-resize-vertical"></i> </a> </li>
      <li class="dropdown"> <a href="#" class="project-switcher-btn dropdown-toggle"> <i class="icon-folder-open"></i> <span>Projects</span> </a> </li>
      <li class="dropdown user"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="icon-male"></i> <span class="username">John Doe</span> <i class="icon-caret-down small"></i> </a>
        <ul class="dropdown-menu">
          <li><a href="pages_user_profile.html"><i class="icon-user"></i> My Profile</a></li>
          <li><a href="pages_calendar.html"><i class="icon-calendar"></i> My Calendar</a></li>
          <li><a href="#"><i class="icon-tasks"></i> My Tasks</a></li>
          <li class="divider"></li>
          <li><a href="login.html"><i class="icon-key"></i> Log Out</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="project-switcher" class="container project-switcher">
    <div id="scrollbar">
      <div class="handle"></div>
    </div>
    <div id="frame">
      <ul class="project-list">
        <li> <a href="javascript:void(0);"> <span class="image"><i class="icon-desktop"></i></span> <span class="title">Lorem ipsum dolor</span> </a> </li>
        <li> <a href="javascript:void(0);"> <span class="image"><i class="icon-compass"></i></span> <span class="title">Dolor sit invidunt</span> </a> </li>
        <li class="current"> <a href="javascript:void(0);"> <span class="image"><i class="icon-male"></i></span> <span class="title">Consetetur sadipscing elitr</span> </a> </li>
        <li> <a href="javascript:void(0);"> <span class="image"><i class="icon-thumbs-up"></i></span> <span class="title">Sed diam nonumy</span> </a> </li>
        <li> <a href="javascript:void(0);"> <span class="image"><i class="icon-female"></i></span> <span class="title">At vero eos et</span> </a> </li>
        <li> <a href="javascript:void(0);"> <span class="image"><i class="icon-beaker"></i></span> <span class="title">Sed diam voluptua</span> </a> </li>
        <li> <a href="javascript:void(0);"> <span class="image"><i class="icon-desktop"></i></span> <span class="title">Lorem ipsum dolor</span> </a> </li>
        <li> <a href="javascript:void(0);"> <span class="image"><i class="icon-compass"></i></span> <span class="title">Dolor sit invidunt</span> </a> </li>
        <li> <a href="javascript:void(0);"> <span class="image"><i class="icon-male"></i></span> <span class="title">Consetetur sadipscing elitr</span> </a> </li>
        <li> <a href="javascript:void(0);"> <span class="image"><i class="icon-thumbs-up"></i></span> <span class="title">Sed diam nonumy</span> </a> </li>
        <li> <a href="javascript:void(0);"> <span class="image"><i class="icon-female"></i></span> <span class="title">At vero eos et</span> </a> </li>
        <li> <a href="javascript:void(0);"> <span class="image"><i class="icon-beaker"></i></span> <span class="title">Sed diam voluptua</span> </a> </li>
      </ul>
    </div>
  </div>
</header>
<div id="container">
  <div id="sidebar" class="sidebar-fixed">
    <div id="sidebar-content">
      <form class="sidebar-search">
        <div class="input-box">
          <button type="submit" class="submit"> <i class="icon-search"></i> </button>
          <span>
          <input type="text" placeholder="Search...">
          </span> </div>
      </form>
      <div class="sidebar-search-results"> <i class="icon-remove close"></i>
        <div class="title"> Documents </div>
        <ul class="notifications">
          <li> <a href="javascript:void(0);">
            <div class="col-left"> <span class="label label-info"><i class="icon-file-text"></i></span> </div>
            <div class="col-right with-margin"> <span class="message"><strong>John Doe</strong> received $1.527,32</span> <span class="time">finances.xls</span> </div>
            </a> </li>
          <li> <a href="javascript:void(0);">
            <div class="col-left"> <span class="label label-success"><i class="icon-file-text"></i></span> </div>
            <div class="col-right with-margin"> <span class="message">My name is <strong>John Doe</strong> ...</span> <span class="time">briefing.docx</span> </div>
            </a> </li>
        </ul>
        <div class="title"> Persons </div>
        <ul class="notifications">
          <li> <a href="javascript:void(0);">
            <div class="col-left"> <span class="label label-danger"><i class="icon-female"></i></span> </div>
            <div class="col-right with-margin"> <span class="message">Jane <strong>Doe</strong></span> <span class="time">21 years old</span> </div>
            </a> </li>
        </ul>
      </div>
      <ul id="nav">
        <li> <a href="index.html"> <i class="icon-dashboard"></i> Dashboard </a> </li>
        <li> <a href="javascript:void(0);"> <i class="icon-desktop"></i> UI Features <span class="label label-info pull-right">6</span> </a>
          <ul class="sub-menu">
            <li> <a href="ui_general.html"> <i class="icon-angle-right"></i> General </a> </li>
            <li> <a href="ui_buttons.html"> <i class="icon-angle-right"></i> Buttons </a> </li>
            <li> <a href="ui_tabs_accordions.html"> <i class="icon-angle-right"></i> Tabs &amp; Accordions </a> </li>
            <li> <a href="ui_sliders.html"> <i class="icon-angle-right"></i> Sliders </a> </li>
            <li> <a href="ui_nestable_list.html"> <i class="icon-angle-right"></i> Nestable List </a> </li>
            <li> <a href="ui_typography.html"> <i class="icon-angle-right"></i> Typography / Icons </a> </li>
            <li> <a href="ui_google_maps.html"> <i class="icon-angle-right"></i> Google Maps </a> </li>
            <li> <a href="ui_grid.html"> <i class="icon-angle-right"></i> Grid </a> </li>
          </ul>
        </li>
        <li> <a href="javascript:void(0);"> <i class="icon-edit"></i> Form Elements </a>
          <ul class="sub-menu">
            <li> <a href="form_components.html"> <i class="icon-angle-right"></i> Form Components </a> </li>
            <li> <a href="form_layouts.html"> <i class="icon-angle-right"></i> Form Layouts </a> </li>
            <li> <a href="form_validation.html"> <i class="icon-angle-right"></i> Form Validation </a> </li>
            <li> <a href="form_wizard.html"> <i class="icon-angle-right"></i> Form Wizard </a> </li>
          </ul>
        </li>
        <li class="current open"> <a href="javascript:void(0);"> <i class="icon-table"></i> Tables </a>
          <ul class="sub-menu">
            <li> <a href="tables_static.html"> <i class="icon-angle-right"></i> Static Tables </a> </li>
            <li class="current"> <a href="tables_dynamic.html"> <i class="icon-angle-right"></i> Dynamic Tables (DataTables) </a> </li>
            <li> <a href="tables_responsive.html"> <i class="icon-angle-right"></i> Responsive Tables </a> </li>
          </ul>
        </li>
        <li> <a href="charts.html"> <i class="icon-bar-chart"></i> Charts &amp; Statistics </a> </li>
        <li> <a href="javascript:void(0);"> <i class="icon-folder-open-alt"></i> Pages </a>
          <ul class="sub-menu">
            <li> <a href="login.html"> <i class="icon-angle-right"></i> Login </a> </li>
            <li> <a href="pages_user_profile.html"> <i class="icon-angle-right"></i> User Profile </a> </li>
            <li> <a href="pages_calendar.html"> <i class="icon-angle-right"></i> Calendar </a> </li>
            <li> <a href="pages_invoice.html"> <i class="icon-angle-right"></i> Invoice </a> </li>
            <li> <a href="404.html"> <i class="icon-angle-right"></i> 404 Page </a> </li>
          </ul>
        </li>
        <li> <a href="javascript:void(0);"> <i class="icon-list-ol"></i> 4 Level Menu </a>
          <ul class="sub-menu">
            <li class="open-default"> <a href="javascript:void(0);"> <i class="icon-cogs"></i> Item 1 <span class="arrow"></span> </a>
              <ul class="sub-menu">
                <li class="open-default"> <a href="javascript:void(0);"> <i class="icon-user"></i> Sample Link 1 <span class="arrow"></span> </a>
                  <ul class="sub-menu">
                    <li class="current"><a href="javascript:void(0);"><i class="icon-remove"></i> Sample Link 1</a></li>
                    <li><a href="javascript:void(0);"><i class="icon-pencil"></i> Sample Link 1</a></li>
                    <li><a href="javascript:void(0);"><i class="icon-edit"></i> Sample Link 1</a></li>
                  </ul>
                </li>
                <li><a href="javascript:void(0);"><i class="icon-user"></i> Sample Link 1</a></li>
                <li><a href="javascript:void(0);"><i class="icon-external-link"></i> Sample Link 2</a></li>
                <li><a href="javascript:void(0);"><i class="icon-bell"></i> Sample Link 3</a></li>
              </ul>
            </li>
            <li> <a href="javascript:void(0);"> <i class="icon-globe"></i> Item 2 <span class="arrow"></span> </a>
              <ul class="sub-menu">
                <li><a href="javascript:void(0);"><i class="icon-user"></i> Sample Link 1</a></li>
                <li><a href="javascript:void(0);"><i class="icon-external-link"></i> Sample Link 1</a></li>
                <li><a href="javascript:void(0);"><i class="icon-bell"></i> Sample Link 1</a></li>
              </ul>
            </li>
            <li> <a href="javascript:void(0);"> <i class="icon-folder-open"></i> Item 3 </a> </li>
          </ul>
        </li>
      </ul>
      <div class="sidebar-title"> <span>Notifications</span> </div>
      <ul class="notifications demo-slide-in">
        <li style="display: none;">
          <div class="col-left"> <span class="label label-danger"><i class="icon-warning-sign"></i></span> </div>
          <div class="col-right with-margin"> <span class="message">Server <strong>#512</strong> crashed.</span> <span class="time">few seconds ago</span> </div>
        </li>
        <li style="display: none;">
          <div class="col-left"> <span class="label label-info"><i class="icon-envelope"></i></span> </div>
          <div class="col-right with-margin"> <span class="message"><strong>John</strong> sent you a message</span> <span class="time">few second ago</span> </div>
        </li>
        <li>
          <div class="col-left"> <span class="label label-success"><i class="icon-plus"></i></span> </div>
          <div class="col-right with-margin"> <span class="message"><strong>Emma</strong>'s account was created</span> <span class="time">4 hours ago</span> </div>
        </li>
      </ul>
      <div class="sidebar-widget align-center">
        <div class="btn-group" data-toggle="buttons" id="theme-switcher">
          <label class="btn active">
            <input type="radio" name="theme-switcher" data-theme="bright">
            <i class="icon-sun"></i> Bright </label>
          <label class="btn">
            <input type="radio" name="theme-switcher" data-theme="dark">
            <i class="icon-moon"></i> Dark </label>
        </div>
      </div>
    </div>
    <div id="divider" class="resizeable"></div>
  </div>
  <div id="content">
    <div class="container">
      <div class="crumbs">
        <ul id="breadcrumbs" class="breadcrumb">
          <li> <i class="icon-home"></i> <a href="index.html">Dashboard</a> </li>
          <li class="current"> <a href="pages_calendar.html" title="">Calendar</a> </li>
        </ul>
        <ul class="crumb-buttons">
          <li><a href="charts.html" title=""><i class="icon-signal"></i><span>Statistics</span></a></li>
          <li class="dropdown"><a href="#" title="" data-toggle="dropdown"><i class="icon-tasks"></i><span>Users <strong>(+3)</strong></span><i class="icon-angle-down left-padding"></i></a>
            <ul class="dropdown-menu pull-right">
              <li><a href="form_components.html" title=""><i class="icon-plus"></i>Add new User</a></li>
              <li><a href="tables_dynamic.html" title=""><i class="icon-reorder"></i>Overview</a></li>
            </ul>
          </li>
          <li class="range"><a href="#"> <i class="icon-calendar"></i> <span></span> <i class="icon-angle-down"></i> </a></li>
        </ul>
      </div>
      <div class="page-header">
        <div class="page-title">
          <h3>Dynamic Tables (DataTables)</h3>
          <span>Good morning, John!</span> </div>
        <ul class="page-stats">
          <li>
            <div class="summary"> <span>New orders</span>
              <h3>17,561</h3>
            </div>
            <div id="sparkline-bar" class="graph sparkline hidden-xs">20,15,8,50,20,40,20,30,20,15,30,20,25,20</div>
          </li>
          <li>
            <div class="summary"> <span>My balance</span>
              <h3>$21,561.21</h3>
            </div>
            <div id="sparkline-bar2" class="graph sparkline hidden-xs">20,15,8,50,20,40,20,30,20,15,30,20,25,20</div>
          </li>
        </ul>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="widget box">
            <div class="widget-header">
              <h4><i class="icon-reorder"></i> Managed Table</h4>
              <div class="toolbar no-padding">
                <div class="btn-group"> <span class="btn btn-xs widget-collapse"><i class="icon-angle-down"></i></span> </div>
              </div>
            </div>
            <div class="widget-content">
              <table class="table table-striped table-bordered table-hover table-checkable datatable">
                <thead>
                  <tr>
                    <th class="checkbox-column"> <input type="checkbox" class="uniform">
                    </th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th class="hidden-xs">Username</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Joey</td>
                    <td>Greyson</td>
                    <td class="hidden-xs">joey123</td>
                    <td><span class="label label-success">Approved</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Wolf</td>
                    <td>Bud</td>
                    <td class="hidden-xs">wolfy</td>
                    <td><span class="label label-info">Pending</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Darin</td>
                    <td>Alec</td>
                    <td class="hidden-xs">alec82</td>
                    <td><span class="label label-warning">Suspended</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Andrea</td>
                    <td>Brenden</td>
                    <td class="hidden-xs">andry</td>
                    <td><span class="label label-danger">Blocked</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Joey</td>
                    <td>Greyson</td>
                    <td class="hidden-xs">joey123</td>
                    <td><span class="label label-success">Approved</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Wolf</td>
                    <td>Bud</td>
                    <td class="hidden-xs">wolfy</td>
                    <td><span class="label label-info">Pending</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Darin</td>
                    <td>Alec</td>
                    <td class="hidden-xs">alec82</td>
                    <td><span class="label label-warning">Suspended</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Andrea</td>
                    <td>Brenden</td>
                    <td class="hidden-xs">andry</td>
                    <td><span class="label label-danger">Blocked</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="widget box">
            <div class="widget-header">
              <h4><i class="icon-reorder"></i> Managed Table (<code>no-padding</code>)</h4>
              <div class="toolbar no-padding">
                <div class="btn-group"> <span class="btn btn-xs widget-collapse"><i class="icon-angle-down"></i></span> </div>
              </div>
            </div>
            <div class="widget-content no-padding">
              <table class="table table-striped table-bordered table-hover table-checkable datatable">
                <thead>
                  <tr>
                    <th class="checkbox-column"> <input type="checkbox" class="uniform">
                    </th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th class="hidden-xs">Username</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Joey</td>
                    <td>Greyson</td>
                    <td class="hidden-xs">joey123</td>
                    <td><span class="label label-success">Approved</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Wolf</td>
                    <td>Bud</td>
                    <td class="hidden-xs">wolfy</td>
                    <td><span class="label label-info">Pending</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Darin</td>
                    <td>Alec</td>
                    <td class="hidden-xs">alec82</td>
                    <td><span class="label label-warning">Suspended</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Andrea</td>
                    <td>Brenden</td>
                    <td class="hidden-xs">andry</td>
                    <td><span class="label label-danger">Blocked</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Joey</td>
                    <td>Greyson</td>
                    <td class="hidden-xs">joey123</td>
                    <td><span class="label label-success">Approved</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Wolf</td>
                    <td>Bud</td>
                    <td class="hidden-xs">wolfy</td>
                    <td><span class="label label-info">Pending</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Darin</td>
                    <td>Alec</td>
                    <td class="hidden-xs">alec82</td>
                    <td><span class="label label-warning">Suspended</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Andrea</td>
                    <td>Brenden</td>
                    <td class="hidden-xs">andry</td>
                    <td><span class="label label-danger">Blocked</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="widget box">
            <div class="widget-header">
              <h4><i class="icon-reorder"></i> TableTools (<code>no-padding</code> &amp; <code>table-tabletools</code>)</h4>
              <div class="toolbar no-padding">
                <div class="btn-group"> <span class="btn btn-xs widget-collapse"><i class="icon-angle-down"></i></span> </div>
              </div>
            </div>
            <div class="widget-content no-padding">
              <table class="table table-striped table-bordered table-hover table-checkable table-tabletools datatable">
                <thead>
                  <tr>
                    <th class="checkbox-column"> <input type="checkbox" class="uniform">
                    </th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th class="hidden-xs">Username</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Joey</td>
                    <td>Greyson</td>
                    <td class="hidden-xs">joey123</td>
                    <td><span class="label label-success">Approved</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Wolf</td>
                    <td>Bud</td>
                    <td class="hidden-xs">wolfy</td>
                    <td><span class="label label-info">Pending</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Darin</td>
                    <td>Alec</td>
                    <td class="hidden-xs">alec82</td>
                    <td><span class="label label-warning">Suspended</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="widget box">
            <div class="widget-header">
              <h4><i class="icon-reorder"></i> Show/ Hide Columns (<code>no-padding</code> &amp; <code>table-colvis</code>)</h4>
              <div class="toolbar no-padding">
                <div class="btn-group"> <span class="btn btn-xs widget-collapse"><i class="icon-angle-down"></i></span> </div>
              </div>
            </div>
            <div class="widget-content no-padding">
              <table class="table table-striped table-bordered table-hover table-checkable table-colvis datatable">
                <thead>
                  <tr>
                    <th class="checkbox-column"> <input type="checkbox" class="uniform">
                    </th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th class="hidden-xs">Username</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Joey</td>
                    <td>Greyson</td>
                    <td class="hidden-xs">joey123</td>
                    <td><span class="label label-success">Approved</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Wolf</td>
                    <td>Bud</td>
                    <td class="hidden-xs">wolfy</td>
                    <td><span class="label label-info">Pending</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Darin</td>
                    <td>Alec</td>
                    <td class="hidden-xs">alec82</td>
                    <td><span class="label label-warning">Suspended</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="widget box">
            <div class="widget-header">
              <h4><i class="icon-reorder"></i> Column Filter (<code>no-padding</code>)</h4>
              <div class="toolbar no-padding">
                <div class="btn-group"> <span class="btn btn-xs widget-collapse"><i class="icon-angle-down"></i></span> </div>
              </div>
            </div>
            <div class="widget-content no-padding">
              <table class="table table-striped table-bordered table-hover table-checkable table-columnfilter datatable" data-columnFilter='{"aoColumns": [ null, {"type": "text"}, {"type": "text"}, {"type": "text"}, { "type": "select" } ]}' data-columnFilter-select2="true">
                <thead>
                  <tr>
                    <th class="checkbox-column"> <input type="checkbox" class="uniform">
                    </th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th class="hidden-xs">Username</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Joey</td>
                    <td>Greyson</td>
                    <td class="hidden-xs">joey123</td>
                    <td>Approved</td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Wolf</td>
                    <td>Bud</td>
                    <td class="hidden-xs">wolfy</td>
                    <td>Pending</td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Darin</td>
                    <td>Alec</td>
                    <td class="hidden-xs">alec82</td>
                    <td>Suspended</td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <th></th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th class="hidden-xs">Username</th>
                    <th>Status</th>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="widget box">
            <div class="widget-header">
              <h4><i class="icon-reorder"></i> Horizontal Scrolling (<code>no-padding</code>)</h4>
              <div class="toolbar no-padding">
                <div class="btn-group"> <span class="btn btn-xs widget-collapse"><i class="icon-angle-down"></i></span> </div>
              </div>
            </div>
            <div class="widget-content no-padding">
              <table class="table table-striped table-bordered table-hover table-checkable datatable" data-horizontal-width="150%">
                <thead>
                  <tr>
                    <th class="checkbox-column"> <input type="checkbox" class="uniform">
                    </th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th class="hidden-xs">Username</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Joey</td>
                    <td>Greyson</td>
                    <td class="hidden-xs">joey123</td>
                    <td><span class="label label-success">Approved</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Wolf</td>
                    <td>Bud</td>
                    <td class="hidden-xs">wolfy</td>
                    <td><span class="label label-info">Pending</span></td>
                  </tr>
                  <tr>
                    <td class="checkbox-column"><input type="checkbox" class="uniform"></td>
                    <td>Darin</td>
                    <td>Alec</td>
                    <td class="hidden-xs">alec82</td>
                    <td><span class="label label-warning">Suspended</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>